<template>
	<div>
		<el-card class="box-card" shadow="hover">
      <template #header>
        <div class="card-header" align="center">
          <span span style='font-size:20px'><i class='el-icon-user'></i> 项目1成员绩效考核</span>
        </div>
        <vxe-toolbar ref="xToolbar" :refresh="{query: searchMethod}" export print custom>
          <template #buttons>
            <vxe-button icon="el-icon-s-promotion" status="success" @click="sendMessage"> 上 传</vxe-button>
            <vxe-button icon="fa fa-save" status="primary" @click="saveEvent"> 保 存</vxe-button>
          </template>
        </vxe-toolbar>
      </template>

      <div>
        <vxe-table
          border
          resizable
          :show-header="true"
          :show-footer="true"
          keep-source
          :auto-resize="true"
          ref="xTree"
          :export-config="{}"
          :print-config="{}"
          :tree-config="{children: 'children'}"
          :edit-config="{trigger: 'click', mode: 'row', showStatus: true}"
          :footer-method="footerMethod"
          :expand-config="tableExpand"
          :data="tableData">
          <vxe-table-column type="seq" width="60"></vxe-table-column>
          <vxe-table-column field="name" title="姓名" tree-node></vxe-table-column>
          <vxe-table-column type="expand" width="80">
            <template #content="{ row }">
              <GraphMain v-if="row.id==1"/>
              <GraphManager v-if="row.id==1"/>
              <GraphCheck v-else-if="row.id==2"/>
              <GraphUI v-else-if="row.id==3"/>
              <div v-else>
                <div class="no-data-box">
                  <el-empty :image-size="200"></el-empty>
                </div>
              </div>
            </template>
          </vxe-table-column>
          <vxe-table-column field="role" title="角色"></vxe-table-column>
          <vxe-table-column field="department" title="部门"></vxe-table-column>
          <vxe-table-column field="sex" title="性别"></vxe-table-column>
          <vxe-table-column field="scopes" title="总分" :edit-render="{name: 'input'}"></vxe-table-column>
          <vxe-table-column field="attend" title="考核绩效"></vxe-table-column>
          <vxe-table-column field="extra" title="备注" :edit-render="{name: 'input'}"></vxe-table-column>
        </vxe-table>
      </div>
		</el-card>
	</div>
</template>
<script lang='ts'>
import { defineComponent,reactive, ref , nextTick} from 'vue'
import { VxeTablePropTypes,VxeTableInstance, VxeButtonEvents,VxeToolbarInstance } from 'vxe-table'
import XEUtils from 'xe-utils'
import { ElMessage } from 'element-plus'
import GraphManager from '/@/views/performance_appraisal/HR/component/Graph_component/graph_manager.vue';
import GraphUI from '/@/views/performance_appraisal/HR/component/Graph_component/graph_UI.vue';
import GraphMain from '/@/views/performance_appraisal/HR/component/Graph_component/graph_main.vue';
import GraphCheck from '/@/views/performance_appraisal/HR/component/Graph_component/graph_check.vue';

export default defineComponent({
  components: {  GraphManager, GraphUI, GraphMain, GraphCheck},
  setup () {
    const xTree = ref({} as VxeTableInstance)
    const xToolbar = ref({} as VxeToolbarInstance)
    const tableData = ref([
      { id: 1, name: '张三', role:'产品经理', sex: '女', department:'研发部', scopes: '', extra: '',attend:'80' },
      { id: 2, name: '李四', role:'后端Java', sex: '男', department:'研发部', scopes: '', extra: '',attend:'80' },
      { id: 3, name: '王五', role:'后端Java', sex: '女', department:'研发部', scopes: '', extra: '',attend:'80'  },
      { id: 4, name: '赵六', role:'后端Java', sex: '男', department:'研发部', scopes: '', extra: '',attend:'80'  },
      { id: 5, name: '刘一', role:'前端Js', sex: '男', department:'研发部', scopes: '', extra: '',attend:'80'  },
      { id: 6, name: '陈二', role:'UI', sex: '男', department:'研发部', scopes: '', extra: '',attend:'80'  },
      { id: 7, name: '孙七', role:'测试', sex: '男', department:'研发部', scopes: '', daextrate: '',attend:'80'  },
    ])

    const searchMethod = () => {
      const $table = xTree.value
      // 清除所有状态
      $table.clearAll()
      return findList()
    }

    nextTick(() => {
      // 将表格和工具栏进行关联
      const $table = xTree.value
      const $toolbar = xToolbar.value
      $table.connect($toolbar)
      findList()
    })

    const meanNum = (list: any[], field: string) => {
      let count = 0
      list.forEach(item => {
        count += Number(item[field])
      })
      return count / list.length
    }

    const sumNum = (list: any[], field: string) => {
      let count = 0
      list.forEach(item => {
        count += Number(item[field])
      })
      return count
    }

    const footerMethod: VxeTablePropTypes.FooterMethod = ({ columns, data }) => {
      const footerData = [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '平均'
          }
          if (['scopes', 'rate'].includes(column.property)) {
            return meanNum(data, column.property)
          }
          else{
            return '-'
          }
          return null
        }),
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '和值'
          }
          if (['scopes', 'rate'].includes(column.property)) {
            return sumNum(data, column.property)
          }
          else{
            return '-'
          }
          return null
        })
      ]
      return footerData
    }


    const tableExpand = ref({
      lazy: true,
      loadMethod ({ row }) {
        return new Promise(resolve => {
          setTimeout(() => {
            // 随机生成列
            const childCols = XEUtils.sample([
              { type: 'seq', title: 'Sequence' },
              { field: 'name', title: 'Name' },
              { field: 'role', title: 'Role' },
              { field: 'age', title: 'Age' },
              { field: 'sex', title: 'Sex' }
            ], XEUtils.random(3, 5))
            // 随机生成数据
            const childData = XEUtils.sample([
              { name: 'TEST1', role: 'Develop', age: 20, sex: '女' },
              { name: 'TEST2', role: 'Develop', age: 22, sex: '女' },
              { name: 'TEST3', role: 'Develop', age: 24, sex: '男' },
              { name: 'TEST4', role: 'Develop', age: 26, sex: '女' },
              { name: 'TEST5', role: 'Develop', age: 28, sex: '男' },
              { name: 'TEST6', role: 'Develop', age: 30, sex: '男' }
            ], XEUtils.random(1, 5))
            row.childCols = childCols
            row.childData = childData
            resolve()
          }, 500)
        })
      }
    } as VxeTablePropTypes.ExpandConfig)

    const saveEvent = () => {
      ElMessage.success({
        message: '保存成功！',
        type: 'success'
      });
    }

    return {
      tableData,
      tableExpand,
      footerMethod,
      xTree,
      xToolbar,
      searchMethod,
      saveEvent
    }
  },
  methods: {
    sendMessage() {
        this.$confirm('是否上传数据', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '上传成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消'
          });
        });
      }
  },
});
</script>
<style lang="scss">
.is-selected {
    color: #1989FA;
}

.el-calendar{
	&:hover {
			box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
			transition: all ease 0.3s;
		}

  margin:0 0 0 20px;
}


.el-calendar-table .el-calendar-day {
   height: 38px;
}


.el-calendar-table thead th {
    padding: 8px 0;
    color: #606266;
    font-weight: 400;
}

.el-calendar__title{
	icon: 'el-icon-date';
}

.home-dynamic {
  height: 180px;
  .home-dynamic-item {
    display: flex;
    width: 100%;
    height: 60px;
    overflow: hidden;
    &:first-of-type {
      .home-dynamic-item-line {
        i {
          color: orange !important;
        }
      }
    }
    .home-dynamic-item-left {
      text-align: right;
      .home-dynamic-item-left-time1 {
      }
      .home-dynamic-item-left-time2 {
        font-size: 13px;
        color: gray;
      }
    }
    .home-dynamic-item-line {
      height: 60px;
      border-right: 2px dashed #dfdfdf;
      margin: 0 20px;
      position: relative;
      i {
        color: var(--color-primary);
        font-size: 12px;
        position: absolute;
        top: 1px;
        left: -6px;
        transform: rotate(46deg);
        background: white;
      }
    }
    .home-dynamic-item-right {
      flex: 1;
      .home-dynamic-item-right-title {
        i {
          margin-right: 5px;
          border: 1px solid #dfdfdf;
          width: 20px;
          height: 20px;
          border-radius: 100%;
          padding: 3px 2px 2px;
          text-align: center;
          color: var(--color-primary);
        }
      }
      .home-dynamic-item-right-label {
        font-size: 13px;
        color: gray;
      }
    }
  }
}
.mytable-footer .col-blue {
  background-color: #2db7f5;
  color: #fff;
}
.mytable-footer .col-red {
  background-color: red;
  color: #fff;
}
</style>
